<%--
  Created by IntelliJ IDEA.
  User: Boss
  Date: 2021/5/13
  Time: 10:55
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>违约数据</title>
</head>
<link rel="stylesheet" type="text/css" href="layui/css/layui.css">
<%
    String path=request.getContextPath();
    String basePath=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<style type="text/css">
    #update{
        display: none;
    }
    .btName{
        width: 80px;
        height: 38px;
        background-color: #009f95;
        border: #009f95;
        position: absolute;
        top: 0px;
    }

</style>
<body>
<div>
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
        <legend>违约数据</legend>
    </fieldset>
    <form action="<%=basePath%>BorrowServlet?opr=CBeOverdue" method="post">
        <div class="layui-form-item">
            <label class="layui-form-label">读者卡号：</label>
            <div class="layui-input-inline">
                <input type="text" name="cardName"  placeholder="请输入..." autocomplete="off" class="layui-input cardName">
            </div>
            <div class="layui-form-mid layui-word-aux"><input name="bt" type="button" value="查询" class="btName"></div>
        </div>
    </form>
    <table id="demo" lay-filter="test"></table>
</div>
<script src="js/jquery-1.12.4.js"></script>
<script src="layui/layui.js"></script>
<script type="text/javascript">
    $(document).ready(function () {

    })
    /**
     * 违约分页
     */
    layui.use('table', function(){
        var table = layui.table;
        //第一个实例
        table.render({
            elem: '#demo'
            ,height: 312,
            id:'test'
            ,url: 'BorrowServlet?opr=CBeOverdue' //数据接口
            ,page: true //开启分页
            ,cols: [[ //表头
                {field: 'id', title: '编号', width:100, sort: true, fixed: 'left'}
                ,{field: 'cardId', title: '读者卡号', width:100}
                ,{field: 'name', title: '读者姓名', width:100}
                ,{field: 'bookId', title: '书籍编号', width:110, sort: true}
                ,{field: 'startTime', title: '借书时间', width:150}
                ,{field: 'day', title: '约定天数', width: 100}
                ,{field: 'endTime', title: '归还时间', width: 150}
                ,{field: 'retype', title: '违约类型', width: 100}
                ,{field: 'money', title: '违约金', width: 100}
                // ,{field: 'wealth', title: '其它操作', width: 135, sort: true}
            ]],
            where:{
                name:""
            }
        });
        $(function () {
            $(".btName").click(function () {
                table.reload('test',{
                    page:{
                        curr:1
                    },
                    where: {
                        name:$("input[name='cardName']").val()
                    }
                });
            })
        })
    });
</script>
</body>
</html>
